<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <NuxtLoadingIndicator />
    <main>
      <slot />
    </main>

  </div>
</template>

<style scoped>
/* 整体布局样式 */
div {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 页头样式 */
header {
  flex: 0 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 内容区样式 */
section {
  display: flex;
  flex: 1 1 auto;
}

/* 侧边栏样式 */
aside {
  flex: 0 0 30%;
  background-color: #e0e0e0;
  padding: 20px;
}

/* 主体内容样式 */
main {
  flex: 1 1 auto;
  padding: 20px;
}

/* 页脚样式 */
footer {
  flex: 0 0 auto;
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>